<template>
  <div class="">
    <!-- tabs 栏 切换 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column align="center" label="试题编号" width="150">
        <template slot-scope="scope">
          <span>{{ scope.row.number }}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="学科" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.subject }}</span>
        </template>
      </el-table-column>

      <el-table-column label="目录" width="90">
        <template slot-scope="scope">
          <span>{{ scope.row.catalog }}</span>
        </template>
      </el-table-column>

      <el-table-column label="题型" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.questionType === '1'">单选</span>
          <span v-else-if="scope.row.questionType === '2'">多选</span>
          <span v-else>简答</span>
        </template>
      </el-table-column>

      <el-table-column label="题干" width="150">
        <template slot-scope="scope">
          <span v-html="scope.row.question">{{ scope.row.question }}</span>
        </template>
      </el-table-column>

      <el-table-column label="录入时间" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.addDate | parseTimeByString }}</span>
        </template>
      </el-table-column>

      <el-table-column label="难度" width="150">
        <template slot-scope="scope">
          <span v-if="scope.row.difficulty === '1'">简单</span>
          <span v-else-if="scope.row.difficulty === '2'">一般</span>
          <span v-else>困难</span>
        </template>
      </el-table-column>

      <el-table-column label="录入人" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.creator }}</span>
        </template>
      </el-table-column>

      <el-table-column label="审核状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.chkState === 0">待审核</span>
          <span v-else-if="scope.row.chkState === 1">已审核</span>
          <span v-else>已拒绝</span>
        </template>
      </el-table-column>

      <el-table-column label="审核意见" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.chkRemarks }}</span>
        </template>
      </el-table-column>

      <el-table-column label="审核人" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.chkUser }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发布状态" width="120">
        <template slot-scope="scope">
          <span v-if="scope.row.publishState === 1">已发布</span>
          <span v-else>已下架</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="200">
        <template slot-scope="scope">
          <!-- 预览 -->
          <el-button
            type="text"
            size="small"
            @click="showdialogVisible(scope.row.id)"
            >预览</el-button
          >
          <!-- 审核 -->
          <el-button
            type="text"
            size="small"
            disabled="disabled"
            v-if="scope.row.chkState !== 0"
            >审核</el-button
          >

          <el-button
            type="text"
            size="small"
            @click="choiceCheckData(scope.row)"
            v-else
            >审核</el-button
          >

          <!-- 修改 -->
          <el-button
            type="text"
            size="small"
            disabled="disabled"
            v-if="scope.row.publishState !== 0"
            >修改</el-button
          >
          <el-button
            type="text"
            size="small"
            v-else
            @click="$router.push(`/questions/new?id=${scope.row.id}`)"
            >修改</el-button
          >

          <!-- 上架 下架 -->
          <el-button
            type="text"
            size="small"
            @click="soldout(scope.row)"
            v-if="scope.row.publishState !== 0"
            >下架</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="grounding(scope.row)"
            v-else
            >上架</el-button
          >

          <!-- 删除 -->
          <el-button
            type="text"
            size="small"
            disabled="disabled"
            v-if="scope.row.publishState !== 0"
            @click="removeData(scope.row)"
            >删除</el-button
          >
          <el-button
            type="text"
            size="small"
            @click="removeData(scope.row)"
            v-else
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 预览弹出层 -->
    <el-dialog
      title="题目预览"
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
    >
      <el-row>
        <el-col :span="6"
          ><div class="text">
            【题型】:{{ previewData.questionType | questionType }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="text">【编号】:{{ previewData.id }}</div></el-col
        >
        <el-col :span="6"
          ><div class="text">
            【难度】:{{ previewData.difficulty | difficulty }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="text">【标签】:{{ previewData.tags }}</div></el-col
        >
      </el-row>
      <el-row>
        <el-col :span="6"
          ><div class="text">
            【学科】:{{ previewData.subjectName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="text">
            【目录】:{{ previewData.directoryName }}
          </div></el-col
        >
        <el-col :span="6"
          ><div class="text">【方向】:{{ previewData.direction }}</div></el-col
        >
      </el-row>
      <!-- 分割线 -->
      <el-divider></el-divider>
      <span>【题干】 :</span>
      <span style="color: blue" v-html="previewData.question"></span>
      <p class="title" v-if="previewData.questionType !== '3'">
        {{ previewData.questionType | questionType }} 选项: (
        以下选中的选项为正确答案 )
      </p>
      <!-- 单选 -->
      <template v-if="previewData.questionType === '1'">
        <el-radio
          v-for="(item, index) in previewData.options"
          :key="index"
          :value="item.isRight"
          :label="1"
          class="block"
        >
          {{ item.title }}
        </el-radio>
      </template>

      <!-- 多选 -->
      <template v-if="previewData.questionType === '2'">
        <el-checkbox-group :value="checkList">
          <el-checkbox
            v-for="(item, index) in previewData.options"
            :key="index"
            :label="item.isRight"
            class="block"
          >
            {{ item.title }}
          </el-checkbox>
        </el-checkbox-group>
      </template>

      <el-divider></el-divider>
      <span style="margin-right: 10px">【参考答案】 :</span>
      <el-button type="danger" ref="answerBtn" @click="lookAnswerVideo = true"
        >视频答案预览</el-button
      >
      <div>
        <video
          v-if="lookAnswerVideo"
          style="width: 400px; margin-top: 20px"
          :src="previewData.videoURL"
          controls="controls"
        ></video>
      </div>
      <el-divider></el-divider>
      <div class="balanceLayout">
        <p>【答案解析】 :</p>
        <div v-html="previewData.answer"></div>
      </div>

      <el-divider></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 审核弹出层 -->
    <el-dialog
      title="题目审核"
      :visible.sync="dialogVisiblechoiCeCheck"
      width="30%"
      :before-close="handleClose"
    >
      <el-radio v-model="dataChoiceCheck.chkState" :label="1">通过</el-radio>
      <el-radio v-model="dataChoiceCheck.chkState" :label="2">拒绝</el-radio>
      <br />
      <br />
      <el-input
        v-model="dataChoiceCheck.chkRemarks"
        type="textarea"
        placeholder="请输入审核建议"
      ></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblechoiCeCheck = false">取 消</el-button>
        <el-button type="primary" @click="submitReport">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { choice, remove , choicePublish, detail, choiceCheck } from '@/api/hmmm/questions.js'
import { questionType ,difficulty} from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionsTabel',
  components: {

  },
  props:{
      tableData:{
          type:Array,
          required:true
      },
      
  },
  data () {
    return {
        lookAnswerVideo: false,
        tableKey:0,
        labelPosition: 'right',
        activeName: '全部',
        dialogVisible: false,
        dialogVisiblechoiCeCheck:false,
        dis:false,
        total:null,
        alertText:'',
        tabData: [],
        checkList: [1],
        subjectList:[],
        getlist:{
          page:1,
          pagesize:10,
        },
        citySelect:{
          province:[],
          city:[]
        },
        tabelArray:['全部','待审核','已审核','已拒绝'],
        previewData:{},
        dataChoiceCheck:{
          chkState: 1,
          chkRemarks:'',
          id:null
        }
      
    }
  },
  filters: {
    // 题型过滤
    questionType (value) {
      const f = questionType.find(t => t.value === parseInt(value))
      return f ? f.label + '题' : ''
    },
    // // 难度过滤
    difficulty (value) {
      const f = difficulty.find(t => t.value === parseInt(value))
      return f ? f.label : ''
    }
  },
  created () {
    this.getList()
  },
  methods: {
    async getList(){
      const {data:res} = await choice(this.getlist) 
      this.tabData = res.items

      this.total = res.counts
      this.alertText = `共 ${this.total} 条记录`
      this.listLoading = false
    },
    // 预览题组详情
    async showdialogVisible (id) {
      this.dialogVisible = true
      const { data } = await detail({ id })
      this.previewData = data
    },
    // 关闭操作
    shutDownDailog () {
      this.$emit('update:tableData', false)
      this.lookAnswerVideo = false
    },
    // 审核操作
    async choiceCheckData(row){
      this.dialogVisiblechoiCeCheck = true
      this.dataChoiceCheck.id = row.id
    },
    async submitReport(){
      if(this.dataChoiceCheck.chkRemarks.trim()){
        try {
          await choiceCheck(this.dataChoiceCheck)
          this.$message.success('成功')
          this.dialogVisiblechoiCeCheck = false
        } catch (error) {
          console.error(error);
        }
      }else{
        this.$message.error('失败')
      }
    },
    
    // 下架操作
    soldout(row){
      this.$confirm('您确定下架此项目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({id: row.id , publishState: row.publishState = 0})
          this.$message({
            type: 'success',
            message: '项目下架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取下架除项目'
          });          
        });
    },
     // 预览弹出层
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
      },
    // 上架操作
    grounding(row){
      this.$confirm('您确定上架此项目吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          await choicePublish({id: row.id , publishState: row.publishState = 1})
          this.$message({
            type: 'success',
            message: '项目上架成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消上架项目'
          });          
        });
        this.getlist.publishState = 0
    },
     // 删除操作
    removeData(row){
      this.$confirm('此操作将永久删除 ' + ', 是否继续?', '提示', {
        type: 'warning'
      }).then(async () => {
          await remove({ id: row.id })
            .then(response => {
              this.$message.success('删除成功!')
              this.tabData.splice(row.id, 1)
              this.getList(this.getlist)
            })
            .catch(response => {
              this.$message.error('删除失败!')
            })
        })
        .catch(() => {
          this.$message.info('已取消操作!')
        })
    },
  }
}
</script>

<style lang="less" scoped>
div.el-dialog {
  margin: 0 auto !important;
  top: 50%;
  transform: translateY(-50%);
  // border-radius: 10px;
  // width: 500px;
  // height: 500px!important;
  .el-dialog__header {
    background: #f7f7f7;
    text-align: left;
    font-weight: 600;
  }
}
.text {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
</style>
